﻿<template>
  <Modal
      :draggable="!$config.mask"
      :mask="$config.mask"
      :mask-closable="!$config.mask"
      :value="value"
      @on-ok="save"
      @on-visible-change="visibleChange"
      width="800"
  >
    <p slot="header">
      {{ title }}<span v-if="modalData.update">{{ modalData.data.name }}</span>
    </p>
    <Form ref="form" :model="dictionaryCategory" :rules="rules" label-postion="top">
        <Row :gutter="20">
        <Col span="12">
            <FormItem label="字典分类代码" prop="code">
                <Input v-model="dictionaryCategory.code" :maxlength="256" placeholder=""></Input>
            </FormItem>
        </Col>
        <Col span="12">
            <FormItem label="字典分类名" prop="name">
                <Input v-model="dictionaryCategory.name" :maxlength="256" placeholder=""></Input>
            </FormItem>
        </Col>
        </Row>
    </Form>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">取消</Button>
      <Button icon="md-checkmark" type="primary" @click="save">确定</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import DictionaryCategory from '@/store/entities/administration/dictionary/dictionary-category';
import Ajax from '@/lib/ajax';

@Component({
  components: {},
})
export default class DictionaryCategoryModal extends AbpBase {
  name: string = 'DictionaryCategoryModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object}) modalData: any;

  dictionaryCategory:DictionaryCategory=new DictionaryCategory();
  rules={
    code:[
      {
        required: true,
        message: '字典分类代码是必须的',
        trigger: 'blur',
      },
      {
        validator: async (rule, value, callback) => {
          const response = await Ajax.post('/api/services/app/DictionaryCategory/ValidateCode', {
            value: value,
            id: this.modalData.update ? this.modalData.data.id : 0,
          });
          if (response.data.result.status) {
            callback();
          } else {
            callback(new Error(response.data.result.message));
          }
        },
        trigger: 'blur',
      },
    ],
    name:[
      {
        required: true,
        message: '字典分类名是必须的',
        trigger: 'blur',
      },
    ],
  };

  get title() {
    if (this.modalData.update) {
      return '更新字典分类：';
    } else {
      return '新建字典分类';
    }
  }



  async save() {
    (this.$refs.form as any).validate(async (valid: boolean) => {
      if (valid) {
        await this.$store.dispatch({
          type: 'dictionaryCategory/createOrUpdateDictionaryCategory',
          data: {
            dictionaryCategory: this.dictionaryCategory,
          },
        });
        const code=this.dictionaryCategory.code;
        if (this.modalData.update) {
          this.$Message.success({
            background:true,
            content: '字典分类 ' + this.dictionaryCategory.name + ' 已更新成功',
            duration: this.$config.duration,
          });
        } else {
          this.$Message.success({
            background:true,
            content: '字典分类 ' + this.dictionaryCategory.name+ ' 已新建成功',
            duration: this.$config.duration,
          });
        }
        this.$emit('save-success',code);
        this.$emit('input', false);
      }
    });
  }

  cancel() {
    this.$emit('input', false);
  }

  reset() {
    (this.$refs.form as any).resetFields();
    this.dictionaryCategory = new DictionaryCategory();
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.reset();
      this.$emit('input', value);
    } else {
      if (this.modalData.update) {
        this.dictionaryCategory=this.$store.state.dictionaryCategory.dictionaryCategoryForEdit.dictionaryCategory;
      }
    }
  }


}
</script>

<style lang="less" scoped>

</style>
